<template>
  <div style="">
    <!-- <span style="color: #409EFF;margin-left: 10px">档案管理</span> -->
    <el-row class="mt-10">
      <el-col :span="22">
        档案类型管理 ：
        <el-select v-model="diseaseType" style="width: 15%;" filterable @change="selectList()">
          <el-option
            v-for="item in diseaseTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-col>
      <el-col :span="2" style="">
        <el-button type="danger" @click="dele()">删除</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col style="padding: 20px;">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          class="table"
          max-height="720"
          style="width: 100%; margin-top: -30px"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="patientId"
            label="患者编号"
            header-align="center"
            align="center"
            min-width="40"
          />
          <el-table-column
            prop="name"
            label="患者姓名"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="sex"
            label="性别"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="age"
            label="年龄"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="档案状态"
            header-align="center"
            align="center"
            :formatter="Status"
          />
          <el-table-column
            label="操作"
            min-width="60"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="jumpsee(scope.row)">跳转查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          :current-page="currentPage"
          :page-sizes="[ 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {selectList, removeTriageFile} from  '@/api/back-management/triage-manage/file_management.js'

  export default {
    name: 'FileManagement',
    components: {  },
    data() {
      return{
        diseaseType: '',
        diseaseTypeList:[{
          value: '',
          label: '全部'
        },{
          value: '胸痛',
          label: '胸痛'
        },{
          value: '卒中',
          label: '卒中'
        },{
          value: '创伤',
          label: '创伤'
        },{
          value: '孕产妇',
          label: '孕产妇'
        },{
          value: '新生儿',
          label: '新生儿'
        },{
          value: '中毒',
          label: '中毒'
        },{
          value: '呼吸',
          label: '呼吸'
        }],
        tableData: [],
        /* 表格分页参数*/
        currentPage: 1,
        pagesize: 10,
        pageTotal: 0,
        /* 用户id */
        userId: this.$store.getters.userId,
        apiToken: this.$store.getters.apiToken,

        loading: true,
        /* 删除档案 */
        tablelist: []
      }
    },
    created() {
      this.selectList()
    },
    methods: {
      /* 查询档案列表 */
      selectList(){
        this.loading = true
        let data = {
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          userId: this.userId,
          diseaseType: this.diseaseType
        }
        selectList(data).then(res => {
          this.tableData = res.data.list
          this.pageTotal = res.data.total
          this.loading = false
        }).catch(err => {
          this.$message.error(err)
        })
      },
      /* 跳转查看*/
      jumpsee(row) {
        row.sourcePage = 'FileManagement'
        this.$router.push({
          name: 'triageList',
          params: row
        })
        console.log(row)
      },

      /* 删除档案*/
      dele() {
        this.$confirm('此操作将永久删除该档案, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeTriageFile(this.tablelist).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.selectList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            }
          })
        }).catch(() => {})
      },

      /* 档案状态格式化数据*/
      Status(row) {
        let str = ''
        if (row.isOpen === '1' || row.isOpen === '2') {
          str += '分诊完成 '
        }else if(row.isOpen === '0'){
          str += '分诊中 '
        }
        return str
      },

      /* 选中框*/
      handleSelectionChange(row) {
        this.tablelist = []
        for (let i = 0; i < row.length; i++) {
          this.tablelist.push(row[i].id)
        }
      },
      // 分页尺寸改变
      handleSizeChange(size) {
        this.pagesize = size
        this.selectList()
      },
      // 分页换页
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.selectList()
      },
    }
  }
</script>

<style>
</style>
